<template>
  <div class="login-container">
    <div class="subject">

      <div class="leftOn">
        <PanelGroup />
      </div>
      <div class="container">
        <div class="left">
          <div class="EchartsTop">
            <BarChart />
          </div>
          <div style="height: 50px; width: 100%" />
          <div class="EchartsBottom">
            <bar-round />
          </div>
        </div>
        <!-- <div class="middle">
          <city-map />
        </div> -->
        <div class="right">
          <div class="EchartsTop">
            <pie-round />
          </div>
          <div style="height: 50px; width: 100%" />
          <div class="EchartsBottomOn">
            <pie-chart />

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 头部标签
import PanelBox from './components/header'
// 本周SIM卡数量
import BarChart from './components/BarChart'
// 物联网卡运营商分布
import BarRound from './components/BarChartRound'
// 河南地图
import CityMap from './components/CityMap'
// 异常统计
import PieChart from './components/PieChart'
// 状态统计
import PieRound from './components/PieRound'
// 头部
import PanelGroup from './components/PanelGroup.vue'

export default {
  name: 'LoginIndex',
  components: {
    PanelBox,
    BarChart,
    BarRound,
    // CityMap,
    PieChart,
    PieRound,
    PanelGroup
  },
  props: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped >
.login-container {
  // margin-top: 50px;
  padding-top: 20px;

}
.subject {
  margin-top: 10px;
}
.left {
  width: 50%;
  height: 850px;
}
.EchartsBottom {
  height: 340px;
  box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
  margin-bottom: 100px;
  background-color: #fff;
  border-radius: 20px;
}
.EchartsTop {
  box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
  background-color: #fff;
  border-radius: 20px;
}
.right {
  width: 48%;
  position: relative;

  height: 850px;
}
.container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}
.leftOn {
  width: 50%;
}
.EchartsBottomOn {
  height: 340px;
  box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
  background-color: #fff;
  border-radius: 20px;
}
</style>
